<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>考试信息系统</title>
	</head>
	<!-- 新 Bootstrap 核心 CSS 文件 -->
	<link href="https://cdn.staticfile.org/twitter-bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet">
	<!-- jQuery文件。务必在bootstrap.min.js 之前引入 -->
	<script src="https://cdn.staticfile.org/jquery/2.1.1/jquery.min.js"></script>
	<!-- 最新的 Bootstrap 核心 JavaScript 文件 -->
	<script src="https://cdn.staticfile.org/twitter-bootstrap/3.3.7/js/bootstrap.min.js"></script>

	<link rel="stylesheet" href="css/animate.css">

	<style>
		#head{
			width: 18%;
			height: 100%;
			display: flex;
			position: absolute;
			left: 0;
			background-color: #c2c2c2;
			padding: 2rem;
			overflow: hidden;
			text-overflow: ellipsis;
			white-space: nowrap;
			flex-direction: column;
		}
		p{
			font-size: 2.5rem;
		}
		#body{
			width: 82%;
			height: 100%;
			display: flex;
			position: absolute;
			right: 0;
			padding: 3rem;
			overflow: hidden;
			text-overflow: ellipsis;
			white-space: nowrap;
			flex-direction: column;
		}
		input{
			margin-bottom: 1.5rem;
		}
		h3{
			margin-top: 0;
			margin-bottom: 3rem;
			text-align: center;
		}
		#note{
			width: 20%;
			height: 12%;
			text-align: center;
			border: #000000 0.3125rem solid;
			border-radius: 1.25rem;
			padding: 4.25rem;
			position: absolute;
			top: 45%;
			left: 50%;
			transform: translate(-50%, -50%);
			background-color: #cbcbcb;
			z-index: 100;
			display: none;
			-webkit-animation-delay:1s;
		}
		#editTest{
			margin-top: 10%;
			width: 60%;
			margin-left: 10%;
			display: none;
		}
		#showClass{
			display: none;
		}
		#showAll{
			display: block;
		}
	</style>
	<body>
		<div id="note">
			<p style="line-height: 100%;">✔</p>
		</div>
		<div>
			<div id="head">
				<h3>教师端</h3>
				<div style="border-bottom: #000000 0.3125rem solid;">
					<p>工号：123456</p>
					<p>姓名：xxx</p>
					<p>职称：xxx</p>
				</div>
				<div style="border-bottom: #000000 0.3125rem solid;">
					<br>
					<p style="text-align: center;margin-bottom: 3.125rem;">查询</p>
					<button type="button" class="btn btn-primary btn-lg btn-block" onclick="getData(2)">全部课程</button>
					<button type="button" class="btn btn-primary btn-lg btn-block" onclick="getData(0)">未安排</button>
					<button type="button" class="btn btn-primary btn-lg btn-block" onclick="getData(1)">已安排</button>
					<br>
				</div>
				<div style="border-bottom: #000000 0.3125rem solid;">
					<br>
					<p style="text-align: center;margin-bottom: 3.125rem;">按名称查询</p>
					<form id="selectName">
						<input type="text" class="form-control btn-lg btn-block" placeholder="输入课程名称" name="name"/>
						<button type="button" class="btn btn-primary btn-lg btn-block" onclick="select()">查询</button>
					</form>
					<br>
				</div>
				<div>
					<br>
					<p style="text-align: center;margin-bottom: 3.125rem;">新增课程</p>
					<form id="addclass">
						<input type="text" class="form-control btn-lg btn-block" placeholder="输入课程名称" name="name"/>
						<input type="text" class="form-control btn-lg btn-block" placeholder="输入任课老师名称" name="tea"/>
						<button type="button" class="btn btn-primary btn-lg btn-block" onclick="addclass()">添加</button>
					</form>
				</div>
			</div>
			<div id="body">
				<div id="showClass">
					<table class="table table-bordered">
						<h2 style="margin: 0 auto;margin-bottom: 3.125rem;">课程详情</h2>
						<thead>
							<tr>
								<th>课程名称</th>
								<th>任课老师</th>
								<th>状态</th>
								<th>操作</th>
							</tr>
						</thead>
						<tbody id="detail">
							
						</tbody>
					</table>
				</div>
				<div id="editTest">
					<h2 style="margin: 0 auto;margin-bottom: 3.125rem;">安排考试</h2>
					<form class="form-horizontal" role="form" id="formAdd">
						<label for="lastname" class="col-sm-2 control-label">选择列表:</label>
						<div class="col-sm-10" style="margin-bottom:5%">
							<select class="form-control" id="getid" name="operate"></select>
						</div>
						<div class="form-group">
							<label for="lastname" class="col-sm-2 control-label">考试班级：</label>
							<div class="col-sm-10">
								<input type="text" class="form-control" id="lastname" placeholder="请输入考试班级" name="class">
							</div>
						</div>
						<div class="form-group">
							<label for="firstname" class="col-sm-2 control-label">考试时间：</label>
							<div class="col-sm-10">
								<input type="datetime" class="form-control" id="firstname" placeholder="请输入考试时间" name="time">
							</div>
						</div>
						<div class="form-group">
							<label for="firstname" class="col-sm-2 control-label">考试地点：</label>
							<div class="col-sm-10">
								<input type="text" class="form-control" id="firstname" placeholder="请输入考试地点" name="place">
							</div>
						</div>
						<div class="form-group">
							<label for="firstname" class="col-sm-2 control-label">监考老师：</label>
							<div class="col-sm-10">
								<input type="text" class="form-control" id="firstname" placeholder="请输入监考老师姓名" name="tea">
							</div>
						</div>
						<button type="submit" class="btn btn-primary btn-lg btn-block" style="width: 50%;margin-left: 30%;" onclick="edit();">完成</button>
					</form>
				</div>
				<div id="showAll">
					<table class="table table-bordered">
						<h2 style="margin: 0 auto;margin-bottom: 3.125rem;">考试详情</h2>
						<thead>
							<tr>
								<th>考试班级</th>
								<th>考试科目</th>
								<th>考试时间</th>
								<th>考试地点</th>
								<th>监考老师</th>
							</tr>
						</thead>
						<tbody id="showDetail">
							
						</tbody>
					</table>
				</div>
			</div>
		</div>

		<script>
			//初始化界面数据
			window.onload=function(){
				getData(2);
			}

			// 获取数据
			function getData(value){
				var a = document.getElementById("editTest");
				var b = document.getElementById("showClass");
				var c = document.getElementById("showAll");
				a.style.display="none";
				b.style.display="block";
				c.style.display="none";
				$.ajax({
						url:'getDataTea.php',
						type:'post',
						data:{check:value},
						success:function(msg){
							document.getElementById("detail").innerHTML = msg;
							//alert("链接数据库成功。");
						},
						error:function(err){
							console.log(err);
							//alert("链接数据库失败，请重试。");
						}
					})
			}

			// 查看细节数据
			function getDetail(value){
				var a = document.getElementById("editTest");
				var b = document.getElementById("showClass");
				var c = document.getElementById("showAll");
				a.style.display="none";
				b.style.display="none";
				c.style.display="block";
				$.ajax({
						url:'showDetail.php',
						type:'post',
						data:{check:value},
						success:function(msg){
							document.getElementById("showDetail").innerHTML = msg;
							//alert("链接数据库成功。");
						},
						error:function(err){
							console.log(err);
							//alert("链接数据库失败，请重试。");
						}
					})
			}
			//添加班级id
			function getClass(){
				$.ajax({
						url:'getClass.php',
						type:'get',
						success:function(msg){
							document.getElementById("getid").innerHTML = msg;
						},
						error:function(err){
							console.log(err);
							//alert("链接数据库失败，请重试。");
						}
					})
			}

			// 添加考试信息
			function editDetail(value){
				var a = document.getElementById("editTest");
				var b = document.getElementById("showClass");
				var c = document.getElementById("showAll");
				a.style.display="block";
				b.style.display="none";
				c.style.display="none";
				getClass();
			}
			function edit(){
				var a = document.getElementById("formAdd");
				if(a.operate.value.toString().trim().length <= 0 || a.tea.value.toString().trim().length <= 0 || a.time.value.toString().trim().length <= 0 || a.place.value.toString().trim().length <= 0 || a.class.value.toString().trim().length <= 0){
					alert("以上表格内容均不可为空");
				}
				else{
					$.ajax({
						url:'editTest.php',
						type:'post',
						data: $('#formAdd').serialize(),
						success:function(msg){
							//alert("链接数据库成功。");
							showNote();
							getData(2);
						},
						error:function(err){
							console.log(err);
							//alert("链接数据库失败，请重试。");
						}
					})
				}
			}

			// 添加课程
			function addclass(){
				var a = document.getElementById("addclass");
				if(a.name.value.toString().trim().length <= 0 || a.tea.value.toString().trim().length <= 0){
					alert("课程名称或任课老师不可为空.");
				}
				else{
					$.ajax({
						url:'editClass.php',
						type:'post',
						data: $('#addclass').serialize(),
						success:function(msg){
							//alert("链接数据库成功。");
							showNote();
							getData(2);
						},
						error:function(err){
							console.log(err);
							//alert("链接数据库失败，请重试。");
						}
					})
				}
			}

			//动画
			function showNote(){
				var a = document.getElementById("note");
				a.style.display="block";
				setTimeout(function() {
					a.style.display="none";
				}, 800);
			}
			
			//模糊查询
			function select(){
				var a = document.getElementById("editTest");
				var b = document.getElementById("showClass");
				var c = document.getElementById("showAll");
				a.style.display="none";
				b.style.display="block";
				c.style.display="none";
				$.ajax({
						url:'selectTea.php',
						type:'post',
						data: $('#selectName').serialize(),
						success:function(msg){
							//alert("链接数据库成功。");
							document.getElementById("detail").innerHTML = msg;
						},
						error:function(err){
							console.log(err);
							//alert("链接数据库失败，请重试。");
						}
					})
			}
		</script>
	</body>
</html>
